<template>
  <el-config-provider :namespace="'ep'" :dark="themeStore.isDark">
    <div id="app">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useThemeStore } from '@/store'
import 'element-plus/theme-chalk/dark/css-vars.css'

const themeStore = useThemeStore()

onMounted(() => {
  themeStore.initTheme()
})

// 监听主题变化
watch(
  () => themeStore.isDark,
  (isDark) => {
    document.documentElement.classList.toggle('dark', isDark)
  },
  { immediate: true }
)
</script>

<style lang="scss">
@import '@/styles/variables.scss';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $text-primary;
  background: $background-primary;
}

button {
  font-family: inherit;
}

#app {
  width: 100%;
  min-height: 100vh;
  background: $background-primary;
  transition: background-color 0.3s ease;
}

// 主题切换过渡
* {
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}

body {
  transition: color $theme-transition-duration ease;
}

// 暗黑模式全局样式
:root.dark {
  color-scheme: dark;
  
  // Element Plus 暗黑模式变量覆盖
  --el-bg-color: #{$dark-background};
  --el-bg-color-overlay: #{$dark-background-secondary};
  --el-text-color-primary: #{$dark-text-primary};
  --el-text-color-regular: #{$dark-text-secondary};
  --el-border-color: #{$dark-border-color};
  
  .el-icon {
    &.github-icon {
      color: #fff;
      
      svg {
        fill: currentColor;
      }
    }
  }

  #app {
    background: $dark-background;
  }
}

// 页面切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 确保过渡期间背景色保持一致
.fade-leave-active {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
</style> 